/*
 * @Description:
 * @Author: fhw
 * @Date: 2023-01-28 23:53:58
 */
import UserImg from '@/components/user/userImg'
import { ChatUserGroup, User } from '@/interface'
import { map } from 'ramda'
import { defineComponent, inject, PropType } from 'vue'
import { onSendMessage } from '../util'
const props = {
	groupChat: {
		type: Object as PropType<ChatUserGroup>,
		required: true,
	},
} as const
export default defineComponent({
	props,
	emits: ['userInfo'],
	setup(props, { emit }) {
		const injectSendMessage = inject<(user: ChatUserGroup) => void>('onSendMessage')
		// 发消息并添加聊天历史记录
		async function hanleSendMessage() {
			const success = await onSendMessage(props.groupChat.group_id)
			if (success && injectSendMessage) {
				injectSendMessage(props.groupChat as ChatUserGroup)
			}
		}
		function openUserInfo(user: User) {
			emit('userInfo', user)
		}
		return () => (
			<div id="groupChatInfo">
				<header>{props.groupChat.groupChat.groupChatName}</header>
				<main>
					<ul>
						{map(
							(item) => (
								<li onClick={() => openUserInfo(item)}>
									<div class="headimgurl">
										<UserImg iconSize={50} imgSize={50} headimgurl={item.headimgurl} />
									</div>
									<div class="name one-hidden">{item.username}</div>
								</li>
							),
							props.groupChat.groupMembers
						)}
					</ul>
				</main>
				<footer>
					<div onClick={hanleSendMessage}>发消息</div>
				</footer>
			</div>
		)
	},
})
